import { Select, Button, Input, Radio, message } from 'antd';
import styles from './index.less';
import { TJModel } from '@/pages/ETrade/components';
import { useTRState } from '#/utils/trHooks.jsx';
import { SearchOutlined, MailOutlined } from '#/utils/antdIcons.js';
import { phone } from '@/assets';
import { List, AutoSizer } from 'react-virtualized';
const SelectPersonnel = ({ value, code, title, onChange, personList }) => {
  const [state, setState] = useTRState({
    visible: false,
    person_index: null,
    persons: personList,
  });
  const { visible, persons, person_index } = state;
  const _onFinish = () => {
    if (person_index != null) {
      onChange({ [code]: persons[person_index].name, [code + 'Id']: persons[person_index].userId });
      toggle();
    } else {
      message.error('该项为必选项！');
    }
  };
  const toggle = () => {
    setState({ visible: !visible });
  };
  const onSearch = (e) => {
    const { value } = e.target;
    let list = [];
    if (value != '') {
      personList.map((x) => {
        if (x.name?.indexOf(value) > -1 || x.mobile?.indexOf(value) > -1) {
          list.push(x);
        }
      });
    } else {
      list = personList;
    }
    setState({
      persons: list,
      person_index: null,
    });
  };
  const radioChange = (e) => {
    setState({ person_index: e.target.value });
  };
  const rightItemRender = ({ key, index, style }) => {
    const item = persons[index];
    return (
      <div
        className={styles.person_item}
        key={key}
        style={style}
        onClick={() => {
          setState({ person_index: index });
        }}
      >
        <Radio value={index}>{item.name}</Radio>
        <div className={styles.label_box}>
          <div>
            <img src={phone} />
            {item.mobile}
          </div>
          <div>
            <MailOutlined />
            {item.email}
          </div>
        </div>
      </div>
    );
  };
  return (
    <>
      <Select style={{ width: '100%', height: 32 }} value={value} open={false} onClick={toggle} />
      {visible && (
        <TJModel
          title={title}
          visible={true}
          onCancel={toggle}
          width={472}
          footer={[
            <>
              <Button style={{ width: 80, height: 32 }} ghost onClick={toggle}>
                取消
              </Button>
              <Button
                style={{ width: 80, height: 32 }}
                type="primary"
                // disabled={state.loading}
                // loading={state.saving}
                onClick={_onFinish}
              >
                确认
              </Button>
            </>,
          ]}
        >
          <div>
            <Input
              placeholder="搜索"
              suffix={<SearchOutlined />}
              allowClear={true}
              onChange={onSearch}
            />
            <Radio.Group className={styles.radio_box} onChange={radioChange} value={person_index}>
              <AutoSizer>
                {({ height, width }) => (
                  <List
                    height={310}
                    rowCount={persons?.length || 0}
                    rowHeight={80}
                    rowRenderer={rightItemRender}
                    width={421}
                    key="userId"
                  />
                )}
              </AutoSizer>
            </Radio.Group>
            {/* {persons.map((item, index) => {
                return <div className={styles.person_item} key={index}>
                  <Radio value={index}>{item.name}</Radio>
                  <div className={styles.label_box}>
                    <div><img src={phone} />{item.mobile}</div>
                    <div><MailOutlined />{item.email}</div>
                  </div>
                </div>
              })} */}
          </div>
        </TJModel>
      )}
    </>
  );
};

export default SelectPersonnel;
